<template>
	<view v-if="isShow">
		<view class="margin-tb-sm padding-lr-sm bg-white u-font-26" v-if="data && data.wl_number">
			<view class="u-flex u-row-between align-center solid-bottom::after u-padding-bottom-20 u-padding-top-30">
				<view style="color: #f62a2a;">
					物流单号：<text class="u-font-28">{{data.wl_number}}</text>
				</view>
				<view class="btn1 u-flex u-row-center" @click="copy(data.wl_number)">复制</view>
			</view>
			<view class="padding-tb-sm">
				物流公司：<text class="u-tips-color">{{data.express_title}}</text>
			</view>
		</view>
        
		<view class="bg-white padding-sm">
			<view class="u-font-26 u-padding-bottom-20">物流信息：</view>
			<view class="u-padding-left-8 u-flex u-row-left u-col-center">
				<view class="bgclass1 u-flex u-row-center bg-grey">收</view>
				<view class="u-flex-1 context u-padding-left-15">
                    <!-- u-order-desc -->
                    【收货地址】{{data.address.receiver_province}}{{data.address.receiver_city}}
                    {{data.address.receiver_district}}{{data.address.receiver_address}}
                </view>
			</view>
			<view class="u-font-20 u-light-color iconclass">---------</view>
			<view style="padding-left: 30rpx;">
                <u-time-line class="">
                	<u-time-line-item v-for="(item, index) in express" :key="index">
                		<template v-slot:content>
                			<view>
                				<view class="context">{{item.context}}</view>
                				<view class="u-order-time time">{{item.time}}</view>
                			</view>
                		</template>
                	</u-time-line-item>
                </u-time-line>
			</view>
		</view>
		<view style="height: 60rpx;"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
            data: {},
            isShow: false,
            express: [],
        };
	},
    onLoad(option) {
        this.id = option.id;
        this.getData();
    },
    methods: {
        // 获取物流信息
        getExpress() {
            this.$ajax('ExpressQuery', {
                express: this.data.express_title, //快递公司编码
                courier: this.data.wl_number, //快递单号
                order_id: this.data.order_no, //订单编号
            }).then(ret => {
                if (ret.status == 0) {
                    this.express = ret.data.data;
                    this.isShow = true;
                } else {
                    this.$toast(ret.message);
                }
            });
        },
        // 获取订单详情
        getData() {
            this.$ajax('order_detail', {
                userToken: this.$getSync('userToken'),
                id: this.id, //订单id
                // refund_id: '',
            }).then(ret => {
                if (ret.status == 0) {
                    this.data = ret.data;
                    this.getExpress()
                } else {
                    this.$toast(ret.message);
                }
            });
        },
        //复制订单编号
        copy(order_no) {
            uni.setClipboardData({
                data: order_no,
                success: function() {
                    console.log('success');
                }
            });
        },
    }
};
</script>

<style lang="scss">
    .context{
        font-size: 24rpx;
        color: #969696;
    }
    .time{
        font-size: 24rpx;
        padding-top: 10rpx;
    }
    
    
    .goods-name{
        width: 60vw;
        font-size: 28rpx;
        font-weight: bold;
        padding-bottom: 20rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .goods-specs{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #929292;
        padding-bottom: 25rpx;
    } 
    
page {
	background-color: #f5f5f5;
}
.class1 {
	background-color: #fff;
	padding: 30rpx 20rpx;
}
.imgclass1 {
	width: 160rpx;
	height: 160rpx;
	border-radius: 12rpx;
	border: 1rpx solid #e4e7ed;
}
.btn1 {
	color: #ffc600;
	font-size: 22rpx;
	width: 90rpx;
	height: 45rpx;
	border-radius: 20rpx;
	border: 1rpx solid #ffc600;
}

//时间轴
.u-node {
	padding-right: 60rpx;
}
.bgclass {
	width: 50rpx;
	height: 50rpx;
	background: linear-gradient(90deg, #25b0ff, #56c2ff);
	border-radius: 50%;
}
.bgclass1 {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
}
.bgclass2 {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	
}
.u-order-title {
	font-weight: bold;
	font-size: 22rpx;
}
.iconclass {
	transform: rotate(90deg);
	transform-origin: 0%;
	position: relative;
	left: 32rpx;
	top: -35rpx;
}
//图标组件背景透明
/deep/ .u-time-axis-node {
	background: transparent !important;
}
.u-order-desc {
	color: rgb(150, 150, 150);
	font-size: 20rpx;
	margin-bottom: 6rpx;
}
.class2 {
	width: 30rpx;height: 20rpx;
}
</style>
